<template>
  <footer class="home-footer">
    <div class="footer-content">
      <!-- 主要内容区域 -->
      <div class="footer-main">
        <div class="footer-section">
          <div class="footer-logo">
            <div class="footer-logo-text">ZenithMind</div>
          </div>
          <p class="footer-description">
            智能学习，成就未来。ZenithMind致力于为每一位学习者提供最优质的在线教育体验。
          </p>
          <div class="footer-social">
            <a href="#" class="social-link">
              <el-icon><ChatDotRound /></el-icon>
            </a>
            <a href="#" class="social-link">
              <el-icon><User /></el-icon>
            </a>
            <a href="#" class="social-link">
              <el-icon><Link /></el-icon>
            </a>
            <a href="#" class="social-link">
              <el-icon><Message /></el-icon>
            </a>
          </div>
        </div>

        <div class="footer-section">
          <h4>学习模块</h4>
          <ul class="footer-links">
            <li><router-link to="/classroom">智能课堂</router-link></li>
            <li><router-link to="/exam">在线考试</router-link></li>
            <li><router-link to="/coding">编程实战</router-link></li>
            <li><router-link to="/task">学习任务</router-link></li>
            <li><router-link to="/ai-chat">AI助手</router-link></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>资源中心</h4>
          <ul class="footer-links">
            <li><router-link to="/library">数字图书馆</router-link></li>
            <li><router-link to="/documents">文档中心</router-link></li>
            <li><router-link to="/disk">云端网盘</router-link></li>
            <li><router-link to="/mall">学习商城</router-link></li>
            <li><router-link to="/version">版本控制</router-link></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>社区交流</h4>
          <ul class="footer-links">
            <li><router-link to="/chat">学习交流</router-link></li>
            <li><router-link to="/blog">技术博客</router-link></li>
            <li><router-link to="/notes">学习笔记</router-link></li>
            <li><router-link to="/news">资讯中心</router-link></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>帮助支持</h4>
          <ul class="footer-links">
            <li><a href="#help">使用帮助</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#feedback">意见反馈</a></li>
            <li><a href="#api">开发者API</a></li>
            <li><a href="#status">服务状态</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>联系我们</h4>
          <div class="contact-info">
            <div class="contact-item">
              <el-icon><Message /></el-icon>
              <span>contact@zenithmind.com</span>
            </div>
            <div class="contact-item">
              <el-icon><Phone /></el-icon>
              <span>400-123-4567</span>
            </div>
            <div class="contact-item">
              <el-icon><Location /></el-icon>
              <span>北京市朝阳区科技园区</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <div class="footer-bottom">
        <div class="footer-copyright">
          <p>&copy; 2024 ZenithMind. All rights reserved.</p>
          <div class="footer-legal">
            <a href="#privacy">隐私政策</a>
            <a href="#terms">服务条款</a>
            <a href="#cookies">Cookie政策</a>
          </div>
        </div>
        <div class="footer-stats">
          <div class="stat-item">
            <span class="stat-number">125K+</span>
            <span class="stat-label">注册用户</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">8.5K+</span>
            <span class="stat-label">优质课程</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">280W+</span>
            <span class="stat-label">学习时长</span>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ChatDotRound, User, Link, Message, Phone, Location } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.home-footer {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  padding: 60px 0 0 0;
  margin-top: 80px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
  
  @media (max-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.footer-section {
  h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: white;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  
  .footer-logo-text {
    font-size: 20px;
    font-weight: 700;
  }
}

.footer-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 12px;
  
  .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }
  }
}

.footer-links {
  list-style: none;
  
  li {
    margin-bottom: 12px;
    
    a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: color 0.3s ease;
      
      &:hover {
        color: white;
      }
    }
  }
}

.contact-info {
  .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
    
    .el-icon {
      font-size: 16px;
    }
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 20px;
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 10px;
  }
  
  p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
  }
}

.footer-legal {
  display: flex;
  gap: 16px;
  
  a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    
    &:hover {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.footer-stats {
  display: flex;
  gap: 30px;
  
  @media (max-width: 768px) {
    justify-content: center;
  }
  
  @media (max-width: 480px) {
    gap: 20px;
  }
}

.stat-item {
  text-align: center;
  
  .stat-number {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: white;
  }
  
  .stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
  }
}
</style>
